<template>
    <h1>用户列表</h1>
    <hr />
    <el-table :data="userList.slice(100, 300)" style="width: 100%" v-loading="loading">
        <el-table-column fixed prop="userid" label="用户id" width="100" />
        <el-table-column prop="username" label="姓名" width="80" />
        <el-table-column prop="password" label="密码" width="100" />
        <el-table-column prop="tel" label="电话号码" width="100" />
        <el-table-column prop="telcode" label="号码区号" width="80" />
        <el-table-column prop="nickname" label="昵称" width="110" />

        <!-- <el-table-column prop="avatar" label="头像" width="110" /> -->
        <el-table-column label="头像" width="150">
            <template #default="scope">
                <img class="avatar" :src="scope.row.avatar" />
            </template>
        </el-table-column>
        <el-table-column prop="sex" label="性别" width="80">
            <template #default="scope">
                <span>{{ scope.row.sex == -1 ? "男" : "女" }}</span>
            </template>
        </el-table-column>
        <el-table-column prop="email" label="邮箱" width="110" />

        <el-table-column prop="createTime" label="创建时间" width="150" />
        <el-table-column prop="qq" label="QQ" width="110" />
        <el-table-column prop="wx" label="微信" width="110" />
        <el-table-column prop="birthday" label="生日" width="110" />
    </el-table>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import service from "../../../utils/service";

const loading = ref(true)

// 商品数据
interface IUser {
    userid: string;
    username: string;
    password: string;
    tel: string;
    telcode: string;
    email: string;
    nickname: string;
    qq: string;
    wx: string;
    avatar: string;
    sex: number;
    birthday: string;
    createTime: string;
}
const userList = reactive<IUser[]>([]);

// 获取用户列表
const getUserList = () => {
    service({
        url: "/user/list",
    }).then((res) => {
        if (res.data.code === "200") {
            userList.push(...res.data.data);
            loading.value = false
        }
    });
};
getUserList();

</script>

<style scoped>
.avatar {
    width: 150px;
    height: 150px;
}
</style>